<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>云呼黑名单查询</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
</head>
<style>


</style>

<body style="border: 1px solid #009688">
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                <fieldset class="layui-elem-field" >
                    <div class="layui-field-box">
                        <form id="searchForm" class="layui-form layui-form-pane">
                            <!--<div class="layui-form-item customer-fixed">-->
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">客户号码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="badPhone"  lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                    <label class="layui-form-label">创建日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="createTime" id="createTime" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-inline">
                                        <button  type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="query">
                                            <i class="layui-icon">&#xe615;</i>
                                            查询
                                        </button>
                                    </div>
                                    <div class="layui-inline">
                                        <span  class="layui-btn layui-btn-danger layui-btn-radius layui-btn-sm" lay-event="importExcel"><span id="importExcel"><i class="layui-icon">&#xe681;</i>导入excel</span></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
            </div>
        </div>
        <table id="list" lay-filter="list" ></table>

    </div>
    <!--操作-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container " id = "tools-container" >
            <span class="layui-btn layui-btn-warm layui-btn-radius layui-btn-sm"  lay-event="add"> <i class="layui-icon">&#xe654;</i>新增</span>
            <span class="layui-btn  layui-btn-radius layui-btn-sm" lay-event="exportTemplate"><i class="layui-icon">&#xe601;</i>导出模板</span>

        </div>
    </script>

</body>


<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:inline="javascript">
    var hasSave = false;
    layui.use(['form','laydate','table','element','upload'], function() {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var upload = layui.upload;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#createTime' //指定元素
        });

        var mytable = table.render({
            elem: '#list'
            , url: "/fsm/external/badCustomerPhone/queryBadCustomerPhone"
            , title: '封存名单'
            , toolbar: '#toolbarDemo'
            , where: {}
            , cols: [[ //标题栏
                {field: 'badPhone', title: '封存号码', width: 200, align: 'center'}
                , {field: 'source', title: '来源', width: 100, align: 'center'}
                , {field: 'remark', title: '备注说明', width: 400, align: 'center'}
                , {field: 'createTime', title: '创建时间', width: 184, align: 'center'}
                , {title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true
            , even: true
            , page: {   //自定义分页条
                limit: 10
                , curr: 1
                , theme: '#5FB878'
                , first: '首页'
                , last: '尾页'
                , prev: '<em><i class="layui-icon">&#xe603;</i></em>'
                , next: '<em><i class="layui-icon">&#xe602;</i></em>'
                , layout: ['prev', 'page', 'next', 'skip']
                , hash: "offset"
            }
            , done: function (res, curr, count) {
                table.render();
                console.log("重新加载upload")
            }
            , request: {
                pageName: 'offset' //页码的参数名称，默认：page
                , limitName: 'limit' //每页数据量的参数名，默认：limit
            }
        });

        /**
         * 监听查询按钮
         *
         */
        form.on('submit(query)', function (data) {

            tableReload(data.field);
        });


        var tableReload = function (data) {

            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    "params['badPhone']": data.badPhone,
                    "params['createTime']":data.createTime
                }
                , done: function (res, curr, count) {

                }
            })
        }

        table.on('tool(list)', function (obj) {

            var rowData = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
//            var tr = obj.tr; //获得当前行 tr 的DOM对象

            switch (layEvent) {

                case 'edit':
                    addOrUpdateBadPhone(true, rowData.id);
                    break;
                case 'del':
                    layer.confirm("你确定删除数据吗？此操作不能撤销！", {icon: 3, title:'提示'}, function(index){



                        del(rowData.id);

                        layer.close(index);
                    });
                    break;


                default:
                    layer.alert("未知的操作类型");
            }

        });


        //监听table头部工具拦
        table.on('toolbar(list)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            /*获取表格选中行*/
            var checkStatus = table.checkStatus("customerList"); //test即为基础参数id对应的值
            switch (obj.event) {
                case 'add':
                    addOrUpdateBadPhone(false, null);
                    break;
                case 'exportTemplate':
                   // alert("导出模板")
                     window.location.href="/fsm/external/badCustomerPhone/exportTemplate";
                    break;

            }
            ;
        });

        var del = function (id) {
            $.ajax({
                type: "POST",
                url:  "/fsm/external/badCustomerPhone/del",
                dataType:"json",
                data:{"id":id},
                success: function (data) {
                    if(data.code=="1"){
                        layer.msg(data.msg,{icon: 6})
                        var button = $("#searchForm").find("[lay-submit]");
                        button.click();
                    }else{
                        layer.msg(data.msg,{icon: 5})
                    }
                },
                error: function (msg) {
                }
            });

        }

        var addOrUpdateBadPhone = function (edit, id) {
            hasSave = false;
            var url = "";
            if (edit)
                url = "/fsm/external/badCustomerPhone/editBadCustomerPhonePage?id=" + id;
            else
                url = url = "/fsm/external/badCustomerPhone/addBadCustomerPhonePage"
            var index = layui.layer.open({
                title: " ",
                type: 2,
                content: url,
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function () {
                        layui.layer.tips('点此返回菜单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                },
                end: function () {
                    console.log("hasSave:"+hasSave)
                    if (hasSave) {
                        var button = $("#searchForm").find("[lay-submit]");
                        button.click();


                    }
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        }


        /*导入customer信息*/
        upload.render({
            elem: '#importExcel'
            ,url: "/fsm/external/badCustomerPhone/importExcel"
            ,accept: 'file'
            ,exts:'xlsx|xls'
            ,before: function(obj){
                layer.load(); //上传loading
            }
            ,done: function(res, index, upload){
                layer.closeAll('loading'); //关闭loading
                console.log(res);
                var button = $("#searchForm").find("[lay-submit]");
                if(res.code=='1'){
                    layer.msg("导入成功："+res.successCount+"条,失败："+res.failCount+"条")

                    button.click();

                }else{
                    layer.msg(res.msg);

                }

            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
                layer.msg("操作异常");
            }
        });

    })


</script>
</html>
